<div class="mfa columns is-tablet is-centered">
  <div class="column is-half">
    <.form let={f} for={@changeset} phx_change="validate" phx_submit="sign_in" class="box" as="tokens">
      <%= if @error do %>
        <div class="notification is-danger">
          Error: <%= @error %>
        </div>
      <% end %>

      <div class="field">
        <%= label f, :access, gettext("Access Token"), class: "label" %>
        <div class="control has-icons-left">
          <%= text_input f, :access, class: "input is-rounded", autocorrect: "off",
                                     autocapitalize: "none", spellcheck: "false",
                                     disabled: !!@task
          %>
          <span class="icon is-small is-left">
            <i class="mdi mdi-api"></i>
          </span>
        </div>
      </div>

      <div class="field">
        <%= label f, :refresh, gettext("Refresh Token"), class: "label" %>
        <div class="control has-icons-left">
          <%= text_input f, :refresh, class: "input is-rounded", autocorrect: "off",
                                      autocapitalize: "none", spellcheck: "false",
                                      disabled: !!@task
          %>
          <span class="icon is-small is-left">
            <i class="mdi mdi-cloud-refresh"></i>
          </span>
        </div>
      </div>

      <div class="field mt-5">
        <div class="control">
          <%= submit gettext("Sign in"), class: ["button",  "is-rounded", "is-fullwidth", "is-link", (if !!@task, do: "is-loading")],
                                         disabled: !@changeset.valid?,
                                         phx_disable_with: gettext("Saving...")
          %>
        </div>
      </div>

      <p class="is-size-7 has-text-centered is-italic has-text-weight-light">
      <% here_link = link gettext("here"), to: "https://docs.teslamate.org/docs/faq#how-to-generate-your-own-tokens",
                                           target: "_blank", rel: "noopener noreferrer"%>

        <%= raw(gettext "Obtaining tokens through the Tesla API requires programming experience or a 3rd-party service. Information can be found %{here}.", here: safe_to_string(here_link)) %>
      </p>
    </.form>
  </div>
</div>
